<template>
	<div id="app" :style="divBack">
		<div class="el-aside" v-on:mouseenter="isMouseeShow()">
			<div class="aside-img">
				<img src="https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png" alt="">
			</div>
			<div><i class="el-icon-s-unfold"></i></div>
			<div><i class="el-icon-loading"></i></div>
		</div>
		<div class="el-main">
			<div class="search-box">
				<el-input placeholder="请输入内容" v-model="searchName" class="input-with-select">
					<el-select v-model="selectName" style="width: 80px;" slot="prepend" placeholder="请选择">
						<el-option v-for="(item,index) in rightClickList" :key="index" :label="item.name"
							:value="item.name"></el-option>
					</el-select>
					<el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
			</div>
			<div class="search-label" style="overflow:auto;">
				<div class="labe-box" v-for="item in 4" :key="item">
					<div>常用工具</div>
					<div class="label-top">
						<div class="button-s" v-for="item in 9" :key="item">
							<div><img
									src="https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png"
									alt="" /></div>
							<div>百度</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-on:mouseleave="handleClose">
			<el-drawer :size="drawerW+'%'" title="吊毛狗" :visible.sync="isDrawer" :direction="'ltr'"
				:before-close="handleClose">
				<div class="crawer-box">
					<div><img src="https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-big.png"
							alt=""></div>
					<div class="crawer-label">
						<div v-for="(item,index) in rightClickList" :key="index" @click="openClick(item.url)">
							{{item.name}}
						</div>
					</div>
				</div>
			</el-drawer>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'app',
		data() {
			return {
				divBack: {
					backgroundImage: 'url("https://www.cooldaohang.com/themes/thinkadmin/public/assets/image/img/bg1.webp")'
				},
				isDrawer: false,
				isBlur: false,
				isSearch: false,
				searchName: '',
				selectName: '',
				rightClickList: [{
					name: '百度',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "https://www.baidu.com"
				}, {
					name: '腾讯',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "https://www.baidu.com"
				}, {
					name: '微信',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "www.baidu.com"
				}, {
					name: '百度',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "www.baidu.com"
				}, {
					name: '百度',
					img: 'https://www.cooldaohang.com/themes/thinkadmin/public/assets/logo/logo-small.png',
					url: "www.baidu.com"
				}],
				drawerW: 15,
			}
		},
		created() {},
		methods: {
			handleClose() {
				this.isDrawer = false
			},

			openClick(url) {
				window.open(url, '_blank');
			},
			isMouseeShow() {
				// 获取当前屏幕宽度
				var screenWidth = window.innerWidth;
				if (screenWidth < 980) {
					this.drawerW = 30
				} else {
					this.drawerW = 15;
				}

				console.log('宽度', screenWidth, this.drawerW);
				this.isDrawer = true
			}
		}
	}
</script>

<style scoped>
	#app {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-ms-overflow-style: none;
		/* 对于IE和Edge */
		scrollbar-width: none;
		/* 对于Firefox */
		overflow: hidden;
		/* 禁止滚动水平和垂直方向 */
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	#app::-webkit-scrollbar {
		display: none;
		/* 对于WebKit浏览器 */
	}

	.el-aside {
		background-color: #eaf5ff;
		height: 100%;
		width: 4%;
		min-width: 50px;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 10px;
		overflow: hidden;
		/* 禁止滚动水平和垂直方向 */
	}

	.el-main {
		height: 100%;
		display: flex;
		justify-content: flex-start;
		overflow: hidden;
		flex-direction: column;
	}

	.search-box {
		margin-top: 150px;
		padding: 0 10vw;
	}

	.aside-img {
		width: 80px;
		height: 80px;
	}

	.crawer-box {
		padding: 20px;
		text-align: center;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.crawer-label {
		padding-top: 80px;
	}

	.el-select .el-input {
		width: 130px;
	}

	.search-label {
		margin-top: 30px;
		/* padding: 0 80px; */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;

	}

	.labe-box {
		/* width: 40%; */
		background-color: rgba(240, 240, 240, 0.4);
		border-radius: 10px;
		padding: 10px;
		margin: 5px;
	}

	.label-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.button-s {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 30%;
		margin: 10px 0;
		background-color: #eaf5ff;
		border-radius: 2px;
	}
	::-webkit-scrollbar {
	    display: none;
	}
</style>